// components/textInput/index.ts
import { areaList } from '@vant/area-data';
Component({

  /**
   * 组件的属性列表
   */
  properties: {
  label:{
    type:String,
    value:""
  },
  type:{
    type:String,
    value:"text"
  },
  placeholder:{
    type:String,
    value:""
  },
  props:{
  type:String,
  value:"",
  observer:(res)=>{
  },
 
  },
  arrList:{
    type:Array,
    value:[
    ]
  },
  ruleFormat:{
    type:Object,
    value:{},
  },
  // 回显表单数据
  inputTextInter:{
    type:String,
    value:"",
    observer:function(val){
      if(["sex","familyRel",'schoolId'].includes(this.properties.props)){
        this.setData({
          selectText:val,
        })
      }
      if(["birthday"].includes(this.properties.props)){
        this.setData({
          selectDateText:val,
        })
      }
      this.setData({
        currentVal:val
      })
    }
  }
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectShow:false,//选择款
    selectText:"", //选择器框选中的文字
    currentDate: new Date().getTime(),
    selectDateText:"", //选择的日期
    areaList, //城市地区列表
    isShowCalendar:false, //是否显示日历弹框
    selectCalendar:"", //日历选择时间
    minDate:new Date(1900, 10, 1).getTime(),
    formatter(type:string, value:number) {
      if (type === 'year') {
        return `${value}年`;
      }
      if (type === 'month') {
        return `${value}月`;
      }
      if(type === 'day'){
        return `${value}日`;
      }
      return value;
    },
    // 选择框的文字
    currentVal:"",
    //错误提示
    errMsg:"",
    isAllPass:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 打开底部弹框
    handelSelect(){
      this.setData({
        selectShow:true
      })
    },
    // 打开日期选择器弹框
    openCalender(){
      this.setData({
        isShowCalendar:true 
      })
    },
    onClose(e:any){
      const {props} = e.currentTarget.dataset
      this.commonRules(props)
      this.setData({
        selectShow:false,
        isShowCalendar:false
      })
    },
    // 输入框事件
    onInput(e:any){
     this.triggerEvent("handelChange",{
       props:this.properties.props,
       value:e.detail.value
     })
     this.setData({
      currentVal:e.detail.value
     })
    },
    //选择框事件
    selectConfirm(e:any){
      const {title,id,props} = e.currentTarget.dataset
      this.setData({
        selectShow:false,
        selectText:title,
        currentVal:id
      })
      this.triggerEvent("handelChange",{
        props:this.properties.props,
        value:title,
        id
      })
      this.commonRules(props)

    },
    // 日期选择改变
    dateSelect(event:any){
     this.setData({
      currentDate: event.detail,
     })
    },
    // 确认日期选择
    dateConfirm(e:any){
      const {props} = e.currentTarget.dataset
      const date = wx.Utils.timeFormat(e.detail) 
     this.setData({
      selectShow:false,
      selectDateText:date,
      currentVal:date
     })  
     this.triggerEvent("handelChange",{
      props:this.properties.props,
      value:date
    })
    this.commonRules(props)
    },
    //确认地区选择
    areaSelect(e:any){
    const {values:arrList} = e.detail    
    const selectText = arrList.reduce((str:string,val:{code:string,name:string},index:number)=>{
      if(index !== 0 || val.name[val.name.length - 1] !== "市"){
        str = str + ' ' + val.name
      }
      return str
    },'')
      this.setData({
      selectShow:false,
      selectText
     })
     this.triggerEvent("handelChange",{
      props:this.properties.props,
      value:selectText
    })
    },
    // 确定日历选择
    calendarConfirm(e:any){
    const str = e.detail.reduce((current:string,val:any,index:number)=>{
      let formatVal = wx.Utils.timeFormat(val)
      current =  current + `${index > 0 ? ' ~ ' : ''}` + formatVal
      return current
    },"")
    this.setData({
      isShowCalendar:false,
      selectCalendar:str
    })
    this.triggerEvent("calendarText",this.data.selectCalendar)
    },
  //  表单校验
  ruleRefs(e:any){
    const {props} = e.currentTarget.dataset
  this.commonRules(props)
  },
  commonRules(props:string){
    const rule =this.properties.ruleFormat as any
    if(props !== rule.props) return
  for (let item of rule.ruleVal){
    if(item.type === "requierd" && !this.data.currentVal){
     this.setData({
        errMsg:item.tooltip,
        isAllPass:false
      }) 
     break;
    }
    else if(['phone','idCard'].includes(item.type) &&  this.data.currentVal){
    let flag = false
    switch(item.type){
      case 'phone':
      flag = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.data.currentVal)
        break;
      case 'idCard':
        flag = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(this.data.currentVal)
      break;
    }
     if(!flag){
      this.setData({
        errMsg:item.tooltip,
        isAllPass:false
      }) 
      break;
     }
    }else{
      this.setData({
        errMsg:"",
        isAllPass:true
      }) 
    }
  }

  }
  }
})